<template>
    <button class="yl-button" :class="[size, type]"><slot></slot></button>
   </template>
   
   <script setup  name='YlButton'>
   const props = defineProps({
       type:{
           type:String,
           default:'default'
       },
       size:{
           type:String,
           default:'mini'
       }
   })
   
   
   
   </script>
   <style lang="scss" scoped>
   // 基于类名定义一些和定制样式无关的样式
   .yl-button {
     appearance: none;
     border: none;
     outline: none;
     background: #fff;
     text-align: center;
     border: 1px solid transparent;
     border-radius: 5px;
     cursor: pointer;
   }
    
   // 大
   .large {
     width: 240px;
     height: 50px;
     font-size: 16px;
   }
    
   // 中
   .middle {
     width: 180px;
     height: 50px;
     font-size: 16px;
   }
    
   // 小
   .small {
     width: 100px;
     height: 32px;
   }
    
   //超小
   .mini {
     width: 60px;
     height: 32px;
   }
    
   .default {
     border-color: #e4e4e4;
     color: #666;
   }
    
   // 确认
   .primary {
     border-color: #27ba9b;
     background: #27ba9b;
     color: #fff;
   }
    
   // 橙色
   .plain {
     border-color: #27ba9b;
     color: #fff;
     background: orange;
   }
    
   // 灰色
   .gray {
     border-color: #ccc;
     background: #ccc;
     color: #fff;
   }
   </style>